<template>
    <div class="container">

        <div>
            <head-bar height="80" middleText="用户登录"  leftText=""></head-bar>
        </div>

        <div class="logo content">
            <!--<image src="root:img/login_top_ptyx.png" style="width: 430px;height: 78px;"></image>-->
            <image src="root:img/login_top_ptyx.png" style="width: 600px;height: 109px;"></image>
        </div>

        <div class="login-form content">
            <div class="login-input active">
                <image src="root:img/login_user.png" class="input-right-icon"></image>
                <input class="input" type="text" @input="changeForm" placeholder="请输入账号" v-model="userName"/>
            </div>
            <div class="login-input active">
                <image src="root:img/login_pwd.png" class="input-right-icon"></image>
                <input class="input" type="password" :maxlength="15" @input="changeForm" placeholder="请输入密码" v-model="password"/>
            </div>
            <div class="remember-check">
                <image @click="checkingRemember" src="root:img/checked.png" class="remember-check-i"
                       v-if="remember"></image>
                <image @click="checkingRemember" src="root:img/no_check.png" class="remember-check-i" v-else></image>
                <text class="remember-check-t">记住密码</text>
            </div>

            <div class="submit-btn" :class="[subCheck]" @click="submitForm">
                <text style="font-size: 40px;color: #ffffff;">登  录</text>
            </div>
        </div>

    </div>
</template>

<style>
    .submit-btn {
        align-items: center;
        justify-content: center;
        border-radius: 10px;
        height: 80px;
        width: 600px;
        margin-top: 20px;
    }

    .remember-check-t {
        font-size: 35px;
        color: #00a65a;
        /*font-weight: bold;*/

    }

    .check-btn {
        background-color: #00c470;
    }

    .checked-btn {
        background-color: #00a65a;
    }

    .remember-check-i {
        width: 40px;
        height: 40px;
        margin-right: 5px;
    }

    .remember-check {
        width: 600px;
        height: 50px;
        align-items: flex-end;
        justify-content: flex-end;
        flex-direction: row;
    }

    .active {
        border-color: #00a65a;
    }

    .login-input {
        flex-direction: row;
        border-width: 2px;
        border-color: #c9c9c9;
        width: 600px;
        height: 100px;
        margin-bottom: 30px;
        border-radius: 10px;
    }

    .input-right-icon {
        height: 40px;
        width: 40px;
        margin-left: 20px;
        margin-right: 10px;
        margin-top: 30px;
    }

    .input {
        width: 560px;
        height: 100px;
    }

    .login-form {
        height: 500px;
        width: 750px;
        flex-direction: column-reverse;
        align-items: center;
        justify-content: center;
    }

    .container {
        flex-direction: column-reverse;

    }

    .content {
        padding-left: 15px;
        padding-right: 15px;
    }

    .logo {
        align-items: center;
        justify-content: center;
        height: 400px;
        width: 750px;
        padding-top: 200px;
    }

</style>

<script>
    import headBar from '../components/headBar.vue'

    var pref = weex.requireModule("pref")
    var md5 = require('md5')
    const modal = weex.requireModule('modal')
    import nw from '../network/nw.js'


    export default {
        data: {
            userName: '',//
            password: '',
            passwordMd5: '',
            remember: false,
            usSubChecked: false
        },
        components: {headBar},
        computed: {
            subCheck: function () {
                return this.usSubChecked ? 'checked-btn' : 'check-btn'
            }
        },
        methods: {

            //监听表单输入框值变化
            changeForm(e) {
                if(this.passwordMd5) {
                    this.password = ''
                    this.passwordMd5 = ''
                }
            },

            //提交表单
            submitForm() {

                if (this.usSubChecked) {
                    return
                }

                this.usSubChecked = true

                if (this.userName == '' || this.userName == null) {
                    this.promptInfo('账号不能为空')
                    return
                }

                if (this.password == '' || this.password == null) {
                    this.promptInfo('密码不能为空')
                    return
                }

                if (this.passwordMd5 == '') {
                    this.passwordMd5 = md5(this.password)
                }

                //清空token
                pref.setString('sid', '')
                //清空用户信息
                pref.set('user_info', {})
                //清空记住密码
                pref.set('user_remember_info', {})

                var self = this


//                var d = {loginCode: 'admin', password: md5('123')}

                nw.postDefine('app/system/user/login', {
                    data: {loginCode: this.userName, password: this.passwordMd5},
                    success(res) {
                        var nav = weex.requireModule("navigator")

                        //存储sid
                        pref.setString('sid', res.sid)


                        delete res.sid

                        //存储用户信息
                        pref.set('user_info', res)

                        //是否记住密码
                        if (self.remember) {
                            pref.set('user_remember_info', {userName: self.userName, passwordMd5: self.passwordMd5})
                        }

                        self.usSubChecked = false

                        self.userName = ''
                        self.password = ''

                        nav.back()
                        // var modal = weex.requireModule('modal')
                        // modal.toast({message:'返回'})
                        // nav.dismiss()
                    },
                    fail(e) {
                        self.usSubChecked = false
                        modal.toast({message: e.msg})
                    },
                    start() {

                    }
                })
            },

            //提示信息
            promptInfo(msg) {
                if (msg) {
                    this.toast(msg)
                    this.usSubChecked = false
                }
            },

            //记住密码事件
            checkingRemember: function () {
                this.remember = !this.remember
            },

            //返回上个页面
            returnPage: function () {
                var nav = weex.requireModule('navigator')
                nav.back()
            }
        },
        mounted() {

            var userInfo = pref.get('user_info')
            var info = pref.get('user_remember_info')
            if (info != null) {
                this.userName = userInfo.loginCode ? userInfo.loginCode : ''
                this.passwordMd5 = info.passwordMd5 ? info.passwordMd5 : ''
                this.password = info.passwordMd5 ? info.passwordMd5 : ''
                if(this.passwordMd5 != ''){
                    this.remember = true
                }
            }


        },
        beforeCreate(){
//            var page=weex.requireModule("page")
//            page.doubleBack()
//            page.enableBackKey(true)
        },
        created(){

        }
    };
</script>